import Image from 'next/image';
import Link from 'next/link';
import { AppItem } from '../app/mockData'; // Adjust path as needed
import { ArrowRight } from 'lucide-react'; // Assuming lucide-react is installed or will be

interface AppCardProps {
  app: AppItem;
}

const AppCard = ({ app }: AppCardProps) => {
  return (
    <Link href={`/app/${app.id}`} className="block group">
      <div className="bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300 ease-in-out group-hover:shadow-cyan-500/50 group-hover:scale-105 h-full flex flex-col">
        <div className="relative w-full h-48 sm:h-56 md:h-64">
          {/* Placeholder for actual image generation/fetching */}
          <Image 
            src={app.imageUrl || "/placeholder-images/default-app-icon.png"} 
            alt={app.name}
            layout="fill"
            objectFit="cover"
            className="transition-transform duration-300 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-10 transition-opacity duration-300"></div>
        </div>
        <div className="p-5 flex flex-col flex-grow">
          <h3 className="text-xl sm:text-2xl font-semibold text-white mb-2 truncate group-hover:text-cyan-400 transition-colors duration-300">{app.name}</h3>
          <p className="text-gray-400 text-sm mb-3 flex-grow min-h-[3em] line-clamp-2">{app.description}</p>
          <div className="mb-4 mt-auto">
            {app.category.map((cat, index) => (
              <span 
                key={index} 
                className="inline-block bg-cyan-600/30 text-cyan-300 text-xs font-medium mr-2 mb-2 px-2.5 py-0.5 rounded-full group-hover:bg-cyan-500/50 group-hover:text-cyan-200 transition-colors duration-300"
              >
                {cat}
              </span>
            ))}
          </div>
          <div className="mt-auto flex justify-end items-center text-cyan-400 group-hover:text-cyan-300 transition-colors duration-300">
            查看详情
            <ArrowRight size={20} className="ml-2 transform group-hover:translate-x-1 transition-transform duration-300" />
          </div>
        </div>
      </div>
    </Link>
  );
};

export default AppCard;
